<template>
  <div class="user-edit-tree">
    <el-input
      placeholder="请输入搜索内容"
      suffix-icon="Search"
      maxlength="100"
      v-model="filterText"
    ></el-input>
    <div class="tree-box" v-if="showTree">
      <el-tree
        ref="OrganizeTreeRef"
        node-key="id"
        :data="allList"
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        :default-expanded-keys="defaultExpandedKeys"
        show-checkbox
        :render-after-expand="false"
        @check-change="checkTree"
      />
    </div>
  </div>
</template>

<script setup>
import userStore from '@/store/modules/user';

const props = defineProps({
  activeOranize: {
    type: Object,
    default: () => {}
  }
});
const emit = defineEmits();

const filterText = ref('');
const defaultExpandedKeys = ref([]);

const allList = computed(() => {
  const _user = userStore();
  const info = _user.allUserList.find(
    item => item.newValue === _user.company_id
  );
  const list = info ? [info] : [];
  defaultExpandedKeys.value = info ? [info.id] : [];
  return JSON.parse(JSON.stringify(list));
});

const showTree = ref(false);
setTimeout(() => {
  showTree.value = true;
}, 10);

function search() {
  OrganizeTreeRef.value?.filter(filterText.value);
}
const OrganizeTreeRef = ref();
watch(filterText, () => {
  search();
});

const filterNode = (value, data) => {
  if (!value) return true;
  return data.label.includes(value);
};

const userList = reactive([]);

let time = null;
let userObj = {};

function checkTree(data, checked) {
  // 目的是拿到人员 而不是团队
  const isUser = data.value > 0;
  if (!isUser) return;
  if (!time) {
    userObj = {};
    userList.forEach(item => (userObj[item.value] = item));
    time = true;
    setTimeout(() => {
      time = null;
      emit('changeUser', userList);
    }, 100);
  }
  if (checked && !userObj[data.value]) {
    userList.push(data);
    userObj[data.value] = data;

    const { getOahth2Id, maxOrder } = getLastOrder(data);
    for (let i = 0; i < (maxOrder || 0); i++) {
      const order = i + 1;
      if (order === data.order) continue;
      OrganizeTreeRef.value?.setChecked(getOahth2Id(data, order), true);
    }
  } else if (!checked && userObj[data.value]) {
    delete data.group_ids;
    delete userObj[data.value];
    userList.splice(
      userList.findIndex(item => item.value === data.value),
      1
    );

    const { getOahth2Id, maxOrder } = getLastOrder(data);
    for (let i = 0; i < (maxOrder || 0); i++) {
      const order = i + 1;
      if (order === data.order) continue;
      OrganizeTreeRef.value?.setChecked(getOahth2Id(data, order), false);
    }
  }
}

function getLastOrder(data) {
  const _user = userStore();
  const userMap = _user.userMap || {};
  const getOahth2Id = _user.getOahth2Id;
  const maxOrder = userMap[data.value].order;
  return { getOahth2Id, maxOrder };
}
</script>

<style lang="scss" scoped>
.user-edit-tree {
  min-width: 300px;
  max-width: 300px;
  padding: 10px 12px 0;
  padding-right: 0;
  display: flex;
  flex-direction: column;
  height: calc(100% - 52px);
  :deep(.el-tree) {
    width: max-content;
    min-width: 100%;
    // .el-tree-node__expand-icon {
    //   content: url('@/assets/images/open.png');
    //   margin-top: 1px;
    //   width: 12px;
    //   height: 12px;
    //   &.expanded {
    //     content: url('@/assets/images/closed.png');
    //     transform: none;
    //   }
    //   svg {
    //     display: none;
    //   }
    // }
    .el-checkbox__input {
      margin-top: 1px;
    }
  }
}
.tree-box {
  flex: 1;
  margin-top: 10px;
  border-radius: 4px;
  padding: 10px 12px;
  overflow: auto;
  background-color: #fff;
  box-shadow: 0 0 12px #0000000d;
}
</style>
